<template>
  <div class="achievement">
    <div class="achievement-header clearfix">
      <date-search @init="init"></date-search>
    </div>
    <div class="achievement-content">
      <ul class="lists">
        <li @click="Jump('nextLevelUser',{'is_agent':1})" class="list">
          <span class="fl">累计{{ftitle_users}}（人）</span>
          <span class="fr">{{customer_count}}</span>
        </li>
        <li @click="Jump('nextLevelAgent',{'is_agent':1})" class="list">
          <span class="fl">累计邀请（人）</span>
          <span class="fr">{{fx_count}}</span>
        </li>
      </ul>
    </div>
    <div class="achievement-content">
      <div class="lists">
        <!-- <a :href="fenxiaoOrder_url"> -->
        <div class="list list2 clearfix" @click="Jump('fenxiaoOrder',{'is_agent':1,'time_type':current,'customize_start':startTime,'customize_end':endTime})">
          <span class="fl">商品{{ftitle_commission}}（元）</span>
          <div class="fr commission">
            <div class="fl">
              <p>{{commission}}</p>
              <p>含待收益 {{wait_commission}}</p>
            </div>
            <i class="icon-right fr"></i>
          </div>
        </div>
      </div>
    </div>
    <p class="explain" @click="Glossary">
      <span class="explain_click">指标名词相关解释</span>
      <span class="icon">?</span>
    </p>
    <van-popup v-model="showGlossary" position="bottom" round>
      <ul class="Glossary">
        <li>
          <p>累计{{ftitle_users}}：</p>
          <p>统计的是{{ftitle_agents}}下{{customer_level}}级的{{ftitle_users}}数量（其中包括{{ftitle_agents}}）</p>
        </li>
        <li>
          <p>累计邀请：</p>
          <p>统计的是{{ftitle_agents}}成功邀请的下{{level}}级{{ftitle_agents}}数量</p>
        </li>
        <li>
          <p>商品{{ftitle_commission}}：</p>
          <p>统计的是{{ftitle_agents}}所能拿到{{ftitle_commission}}（包括已提现和待收益）的订单</p>
        </li>
      </ul>
      <div class="ok" @click="closePop">
        <span>我知道了</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import 'vant/lib/index.css'
import { Popup, DatetimePicker } from 'vant'
import dateSearch from '@/views/user/fxs/components/dateSearch'
import { getCommissionContent } from '@/api/user/fxs/fxsApi'
Vue.use(Popup).use(DatetimePicker)
export default Vue.extend({
  components: {
    dateSearch
  },
  data() {
    return {
      ftitle_users: '',
      customer_count: null,
      fx_count: null,
      ftitle_commission: '',
      commission: null,
      wait_commission: null,
      ftitle_agents: '',
      customer_level: '',
      level: '',
      nextLevelUser_url: '',
      nextLevelAgent_url: '',
      fenxiaoOrder_url: '',
      current: 0,
      show_date: false,
      show_start_time: true,
      startTime: null,
      endTime: null,
      historyStartTime: new Date(),
      historyEndTime: new Date(),
      showGlossary: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(params) {
      if (params) {
        this.startTime = params.startTime
        this.endTime = params.endTime
        this.current = params.current
      }
      const data = {
        customize_start: this.startTime,
        customize_end: this.endTime,
        time_type: this.current
      }
      this.$loadingWrap.show()
      getCommissionContent(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.ftitle_users_url = res.data.level_user_url
          this.nextLevelAgent_url = res.data.level_agent_url
          this.fenxiaoOrder_url = res.data.level_order_url
          this.ftitle_users = res.data.ftitle_users
          this.customer_count = res.data.customer_count
          this.fx_count = res.data.fx_count
          this.ftitle_commission = res.data.ftitle_commission
          this.commission = res.data.commission || '0.00'
          this.wait_commission = res.data.wait_commission
          this.ftitle_agents = res.data.ftitle_agents
          this.customer_level = res.data.customer_level
          this.level = res.data.level
        } else {
          this.$Error(res.msg)
        }
      })
    },
    Glossary() {
      this.showGlossary = true
    },
    closePop() {
      this.showGlossary = false
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/mixin';
.achievement {
  // background-color: #f4f4f4;
  min-height: 600px;
  &-header {
    background-color: $default;
    padding: 20px 10px;
    margin-bottom: 20px;
    // .item {
    //   display: flex;
    //   justify-content: space-between;
    //   // flex-wrap: wrap;
    //   width: 50%;
    //   margin-left: 30px;
    //   height: 56px;
    //   border: 1.5px solid $warning;
    //   border-radius: 28px;
    //   box-sizing: border-box;
    //   overflow: hidden;
    //   li {
    //     flex: 1;
    //     // height: 100%;
    //     text-align: center;
    //     border-right: 1px solid $warning;
    //     box-sizing: border-box;
    //     &:last-child {
    //       border-right: none;
    //     }
    //     span {
    //       display: inline-block;
    //       width: 100%;
    //       color: $warning;
    //       font-size: 22px;
    //       line-height: 56px;
    //       &.cur {
    //         border-right: 1px solid $warning;
    //         color: $default;
    //         background-color: $warning;
    //       }
    //     }
    //   }
    // }
    // .date {
    //   margin-right: 30px;
    //   display: inline-block;
    //   color: #666;
    //   span {
    //     line-height: 60px;
    //   }
    //   .date_time{
    //     &.active{
    //       color:#ff5a00;
    //     }
    //     .wx-picker{
    //       display:inline-block;
    //     }
    //   }
    //   .date-hide {
    //     transform: rotateZ(90deg);
    //   }
    //   .date-show {
    //     line-height: 56px;
    //     span {
    //       color: $warning;
    //       font-size: 24px;
    //     }
    //   }
    // }
  }
  .achievement-content {
    background-color: $default;
    padding: 0 0 0 30px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .list {
      height: 110px;
      line-height: 110px;
      color: #333;
      padding-right: 30px;
      &:first-child {
        border-bottom: 2px solid #f4f4f4;
      }
      span {
        display: inline-block;
        max-width: 50%;
        font-size: 26px;
        @include showEllipsis;
        &.fr {
          color: #999;
        }
      }
      .commission {
        max-width: 50%;
        display: flex;
        // margin-top: 12px;
        justify-content: center;
        align-items: center;
        height: 100%;
        p {
          width: 100%;
          line-height: 44px;
          color: #333;
          text-align: right;
          font-size: 24px;
          @include showEllipsis;
          &:last-child {
            color: #999;
            font-size: 20px;
          }
        }
        .icon-right {
          margin: 0 0 0 10px;
        }
      }
    }
  }
  .explain {
    margin: 30px;
    display:flex;
    align-items:center ;
    .explain_click {
      color: #999;
      font-size: 24px;
    }
    .icon {
      display: block;
      width: 48px;
      height: 48px;
      line-height: 48px;
      font-size: 28px;
      text-align: center;
      border: 2px solid $warning;
      color: $warning;
      font-weight: bold;
      border-radius: 50%;
      transform: scale(0.5);
      // margin-left: -16px;
    }
  }
}
.Glossary {
  margin-top: 30px;
  padding-left: 30px;
  li {
    padding: 24px 0;
    border-bottom: 1px solid #f4f4f4;
    box-sizing: border-box;
    p {
      width: 710px;
      line-height: 48px;
      color: #333;
      font-size: 28px;
      &:nth-child(2) {
        color: #999;
        font-size: 24px;
      }
    }
  }
}
.ok {
  background-color: $warning;
  text-align: center;
  margin: 30px;
  margin-top: 20px;
  border-radius: 42px;
  span {
    line-height: 84px;
    color: $default;
    font-size: 30px;
  }
}
</style>
